<template>
  <HeaderComp></HeaderComp>
  <van-tree-select v-model:main-active-index="activeIndex" height="800px" :items="items"
    @click="getCategorlist(items[activeIndex].text)">
    <template #content>
      <van-grid :column-num="1" :border="false" :clickable="true">
        <van-grid-item v-for="(item, index) in brandList" :key="index" :text="item.brand"
          @click="toCategoryBrandproList(item)" />
      </van-grid>
    </template>
  </van-tree-select>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue'
import type { Ref } from 'vue'
import { categoryBank, categoryList } from '@/api/api';
import { useRouter } from 'vue-router';

const activeIndex: Ref<number> = ref(0);
const items: Ref<any[]> = ref([])
const brandList: Ref<any[]> = ref([])
const router = useRouter()

onMounted(async () => {
  const res = await categoryList()
  res.data.forEach((item: string) => {
    items.value.push({ text: item })
  })
  getCategorlist('手机')
})
const getCategorlist = async (goodsname: string) => {
  const res = await categoryBank({ category: goodsname })
  brandList.value = res.data
}

const toCategoryBrandproList = (item: any) => {
  router.push(
    {
      path: '/categorybrandprolist',
      query: {
        category: items.value[activeIndex.value].text,
        brand: item.brand
      }
    }
  )
}
</script>

<style scoped lang="scss">
#app {
  display: flex;
  flex-direction: column;

  .van-tree-select {
    flex: 1;

    :deep(.van-grid-item__text) {
      font-size: 18px;
    }
  }


}
</style>